<!-- 名片详情 -->
<template>
	<view class="card-details">
		<view class="card-details-item">
			<view class="card-details-item-top">
				<view class="card-details-item-top-userInfo">
					<text class="card-details-item-top-name">{{dataForm.name}}</text>
					<text class="card-details-item-top-job">{{dataForm.duties}}</text>
				</view>
				<view class="card-details-item-bottom">
					<view class="">手机：{{dataForm.phone}}</view>
					<view class="word-break-all">公司：{{dataForm.company}}</view>
					<view class="">邮箱：{{dataForm.email}}</view>
					<view class="">地址：{{dataForm.address}}</view>
				</view>
				<image src="../static/ic_1.png" class="card-img" mode="widthFix"></image>
			</view>

		</view>
		<view class="" style="width: 100rpx;height: 215px;"></view>
		<view class="card-details-content" :style="{backgroundColor:cardColor?'#000000': 'rgba(0,0,0,.4)'}">
			<image class="card-details-content-img" :src="dataForm.headimgurl"></image>
			<view class="card-details-content-name u-m-b-20 ">{{dataForm.name}}</view>
			<view class="card-details-content-tech u-m-b-10">{{dataForm.duties}}</view>
			<view class="card-details-content-company ">{{dataForm.company}}</view>
		</view>
		<view class="card-details-bottom">
			<view class="u-flex card-details-follow">
				<view class="u-flex follow">
					<image class="follow-image" src="../static/ic_13.png"></image>
					<text class="follow-title">{{dataForm.follow_count ? dataForm.follow_count : 0}}关注</text>
				</view>
				<view class="u-flex follow" @click="collection">
					<image class="follow-image" src="../static/ic_14.png" v-if="dataForm.is_follow=='0'"></image>
					<image class="follow-image" src="../static/ic_14_fill.png" v-else></image>
					<text class="follow-title">{{dataForm.is_follow == 1?'已收藏':'收藏'}}</text>
				</view>
				<view class="u-flex follow"  @click="onShare">
					<image class="follow-image" src="../static/ic_15.png"></image>
					<text class="follow-title">发名片</text>
					<!-- <button class="share-btn" type="default" open-type='share'></button> -->
				</view>
			</view>

			<view class="personal-information">
				<view class="u-flex personal-information-item" @click="onCopyContent(dataForm.phone)">
					<text class="personal-name">手机</text>
					<view class="phone-img">
						<image src="../static/ic_16.png" mode=""></image>
					</view>
					<text class="personal-info u-line-1">{{dataForm.phone}}</text>
				</view>


				<view class="u-flex personal-information-item" @click="onCopyContent(dataForm.qq)">
					<text class="personal-name">QQ</text>
					<view class="phone-img">
						<image src="../static/ic_17.png" mode=""></image>
					</view>
					<text class="personal-info u-line-1">{{dataForm.qq}}</text>
				</view>

				<view class="u-flex personal-information-item" @click="onCopyContent(dataForm.weixin)">
					<text class="personal-name">微信</text>
					<view class="phone-img">
						<image src="../static/ic_18.png" mode=""></image>
					</view>
					<text class="personal-info u-line-1">{{dataForm.weixin}}</text>
				</view>

				<view class="u-flex personal-information-item" @click="onCopyContent(dataForm.email)">
					<text class="personal-name">邮箱</text>
					<view class="phone-img">
						<image src="../static/ic_19.png" mode=""></image>
					</view>
					<text class="personal-info u-line-1">{{dataForm.email}}</text>
				</view>

				<view class="u-flex personal-information-item" @click="onCopyContent(dataForm.address)">
					<text class="personal-name">地址</text>
					<view class="phone-img">
						<image src="../static/ic_20.png" mode=""></image>
					</view>
					<text class="personal-info u-line-1">{{dataForm.address}}</text>
				</view>
			</view>

			<view class=" company-profile" v-if="dataForm.introduce">
				<view class="personal-pdlr30">
					<view class="company-profile-title personal-video-and-company">
						公司介绍
					</view>
					<view class="" style="width: 100%;min-height: 200rpx;word-wrap:break-word">
						<rich-text selectable :nodes="dataForm.introduce"></rich-text>

					</view>
				</view>
			</view>
			<view class="video" v-if="dataForm.video">
				<view class="personal-pdlr30">
					<view class="video-title personal-video-and-company">
						视频
					</view>
					<view class="video-v">
						<video id="myVideo" :src="dataForm.video" :danmu-btn='false' enable-play-gesture controls
							object-fit='contain'></video>
					</view>
				</view>
			</view>
			<view class="d-image" v-if="dataForm.imgList">
				<view class="personal-pdlr30">
					<view class="video-title personal-video-and-company">
						图片
					</view>
					<image :src="el" mode="widthFix" class="del-image" @click="onPreImg(index)"  v-for="(el,index) in dataForm.imgList"
						:key='index'></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cardMixin from '../mixins/index.js'
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		mixins: [cardMixin],
		data() {
			return {
				cardColor: false,
			};
		},
		methods:{
			$onPageScroll: function(scrollTop) {
				if (scrollTop.scrollTop == 0) {
					this.cardColor = true
				} else {
					this.cardColor = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.follow-image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 8rpx;
	}

	.del-image {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.share-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		opacity: 0;
		outline: 0;
		border: 0;
	}


	.d-image {
		border-top: 10rpx solid #f5f5f5;
	}

	#myVideo {
		width: 100%;
		height: 100%;
	}

	video {
		width: 100%;
		height: 100%;
	}

	.personal-pdlr30 {
		position: relative;
		z-index: 66;
		padding: 0 30rpx;
		border-bottom: 10rpx solid #f5f5f5;
	}

	.company-profile {
		background-color: #ffffff;
	}

	.video .personal-pdlr30 {
		border-bottom: 0;
	}

	.personal-video-and-company {
		width: 100%;
		height: 85rpx;
		line-height: 85rpx;
		font-size: 30rpx;
	}


	.video-v {
		width: 100%;
		height: 388rpx;
		border-radius: 10rpx;
		background: #f4f4f4;
	}

	.personal-information-item {
		height: 100rpx;
		display: flex;
		align-items: center;
	}


	.personal-info {
		flex: 1;
	}

	.personal-name {
		width: 60rpx;
	}

	.phone-img {
		width: 50rpx;
		height: 50rpx;
		margin: 0 32rpx;
		position: relative;
	}

	.phone-img::after {
		content: '';
		width: 1rpx;
		height: 25rpx;
		background-color: #C1C4CC;
		position: absolute;
		bottom: -36rpx;
		right: 50%;
		transform: translateX(-50%);
	}


	.personal-information-item:nth-last-of-type(1) .phone-img::after {
		height: 0rpx;
	}


	.personal-information {
		position: relative;
		z-index: 77;
		padding: 0 30rpx;
	}




	.follow {
		position: relative;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		height: 130rpx;
	}

	.card-details-follow {
		position: relative;
		z-index: 65;
		border-bottom: 1rpx solid rgba(0, 0, 0, .05);
	}


	.follow-title {
		font-size: 24rpx;
	}



	.card-details-item {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.card-details-content {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding-top: 25rpx;
	}

	.card-details-content {
		color: #ffffff;
	}

	.card-details-content-name {
		font-weight: 700;
		font-size: 34rpx;
	}



	.card-details-content-company {
		font-size: 22rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		word-break: break-all;
	}

	.card-details-content-tech {
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		word-break: break-all;
	}

	.word-break-all {
		word-break: break-all;
	}

	.card-details-content-img {
		width: 150rpx;
		// margin-top: 50rpx;
		position: relative;
		top: -20rpx;
		height: 150rpx;
		border-radius: 50%;
		margin: 0 auto 0rpx;
	}

	.card-details-content {
		display: flex;
		justify-content: center;
		height: 215px;
		position: relative;
		z-index: 99;
	}

	.card-details-item-top {
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 5;
		padding: 30rpx 30rpx 60rpx;
		height: 215px;
		background-color: #ffffff;
	}

	.card-details-item-top-userInfo {
		.card-details-item-top-name {
			display: inline-block;
			line-height: 100rpx;
			margin-right: 15rpx;
			margin-bottom: 35rpx;
			font-size: 34rpx;
		}

		.card-details-item-top-job {
			display: inline-block;
			width: 300rpx;
			font-size: 20rpx;
			word-break: break-all;
		}
	}


	.personal-information {
		border-bottom: 10rpx solid #f5f5f5;
	}

	.card-details-bottom {
		position: relative;
		z-index: 88;
		width: 100%;
		background-color: #ffffff;
	}



	.card-details-item-bottom view {
		margin-bottom: 10rpx;
		font-size: 20rpx;
	}

	.card-img {
		position: absolute;
		right: 110rpx;
		top: 95rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		z-index: 20;
	}
</style>
